<template>
  <div
    :class="{'horizontal-panel-bar':mode==='horizontal', 'vertical-panel-bar':mode!=='horizontal'}"
  >
    <template v-for="(panel, panelIndex) in panels">
      <div :key="panelIndex" class="box-item">
        <item
          :mode="mode"
          :data="panel"
          :background="background"
          @stateInit="onPanelStateInit"
          @stateWillChange="onPanelStateWillChange"
        />
      </div>
    </template>
  </div>
</template>

<script>
import Item from './item'

export default {
  components: {
    Item
  },
  // mixins: [MenuDispatcher],
  props: {
    mode: {
      type: String,
      required: false,
      default: 'horizontal' // horizontal 或 vertical
    },
    // 面板数组
    panels: {
      type: Array,
      required: true,
      default: () => []
    },
    background: {
      type: Object,
      required: true,
      active: {
        type: String,
        required: false,
        default: 'transparent'
      },
      hover: {
        type: String,
        required: false,
        default: 'transparent'
      }
    },
    // 面板状态切换消息处理函数
    onPanelStateWillChange: {
      type: Function,
      required: true
    },
    onPanelStateInit: {
      type: Function,
      required: true
    }
  }
  // watch: {
  //   panels(val) {
  //     console.log('panels changed', val)
  //   }
  // }
}
</script>

<style lang="scss" scoped>
.horizontal-panel-bar {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  // align-items: stretch;
  // justify-items: center; /* 水平居中 */
  .box-item {
    // flex-grow=0,表示只显示活动面板的实际高度,不允许它的高度弹性grow
    flex-grow: 0;
    // padding: 0 1px;
  }
}

.vertical-panel-bar {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  // background-color: $panel-group-bg-color;
  // justify-items: center; /* 水平居中 */
  .box-item {
    // flex-grow=0,表示只显示活动面板的实际高度,不允许它的高度弹性grow
    flex-grow: 0;
    padding-bottom: 1px;
    &:last-child {
      padding-bottom: 0 !important;
    }
  }
}
</style>
